<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>皮肤图鉴 - 无畏契约 Wiki</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            background: linear-gradient(135deg, #0f1923 0%, #ff4655 100%);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            background-color: #ff4655;
            padding: 1rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .nav-container {
            width: 100%;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #ececec;
        }

        .main-content {
            flex: 1;
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .weapon-categories {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
            padding: 2rem;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
        }

        .category-btn {
            padding: 1rem 2rem;
            background-color: #ff4655;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .category-btn:hover {
            background-color: #ff5c69;
        }

        .category-btn.active {
            background-color: #0f1923;
        }

        .skins-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            padding: 2rem;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
        }

        .skin-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .skin-card:hover {
            transform: translateY(-5px);
        }

        .skin-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background-color: #f5f5f5;
            background-size: cover;
            background-position: center;
            border-radius: 12px; /* 圆角 */
        }

        .skin-info {
            padding: 1.5rem;
        }

        .skin-name {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .skin-series {
            color: #666;
            font-size: 0.9rem;
        }

        .footer {
            background-color: #333;
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }

        .footer-content {
            width: 100%;
            padding: 0 2rem;
            text-align: center;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .weapon-categories {
                flex-direction: column;
                align-items: stretch;
                gap: 1rem;
            }

            .skins-grid {
                grid-template-columns: 1fr;
            }

            .main-content {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.html" class="logo">无畏契约 Wiki</a>
            <div class="nav-links">
                <a href="index.html">首页</a>
                <a href="skins.html">皮肤图鉴</a>
                <a href="data.index.html">武器数据</a>
                <a href="login.html">登录</a>
            </div>
        </div>
    </nav>

    <main class="main-content">
        <div class="weapon-categories">
            <button class="category-btn active">手枪</button>
            <button class="category-btn">冲锋枪</button>
            <button class="category-btn">步枪</button>
            <button class="category-btn">狙击步枪</button>
            <button class="category-btn">机枪</button>
        </div>

        <div class="skins-grid">
            <div class="skin-card">
                <div class="skin-image" style="background-image:url('file:///C:/Users/Lenovo/Desktop/valorant-project/front/666/images/skin1.jpg');"></div>
                <div class="skin-info">
                    <div class="skin-name">标配</div>
                    <div class="skin-series">经典系列</div>
                </div>
            </div>
            <div class="skin-card">
                <div class="skin-image"></div>
                <div class="skin-info">
                    <div class="skin-name">短炮</div>
                    <div class="skin-series">经典系列</div>
                </div>
            </div>
            <div class="skin-card">
                <div class="skin-image"></div>
                <div class="skin-info">
                    <div class="skin-name">狂怒</div>
                    <div class="skin-series">经典系列</div>
                </div>
            </div>
            <div class="skin-card">
                <div class="skin-image"></div>
                <div class="skin-info">
                    <div class="skin-name">鬼魅</div>
                    <div class="skin-series">经典系列</div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 无畏契约 Wiki. 本网站仅供学习交流使用。</p>
        </div>
    </footer>

    <script>
        // 定义武器皮肤数据
        const weaponSkins = {
            '手枪': [
                { name: '标配', series: '经典系列' },
                { name: '短炮', series: '经典系列' },
                { name: '狂怒', series: '经典系列' },
                { name: '鬼魅', series: '经典系列' },
                { name: '正义', series: '经典系列' }
            ],
            '冲锋枪': [
                { name: '蜂刺', series: '经典系列' },
                { name: '骇灵', series: '经典系列' }
            ],
            '步枪': [
                { name: '獠犬', series: '经典系列' },
                { name: '戍卫', series: '经典系列' },
                { name: '幻影', series: '经典系列' },
                { name: '狂徒', series: '经典系列' }
            ],
            '狙击步枪': [
                { name: '飞将', series: '经典系列' },
                { name: '莽侠', series: '经典系列' },
                { name: '冥狙', series: '经典系列' }
            ],
            '机枪': [
                { name: '战神', series: '经典系列' },
                { name: '奥丁', series: '经典系列' }
            ]
        };

        // 更新皮肤展示
        function updateSkins(category) {
            const skinsGrid = document.querySelector('.skins-grid');
            const skins = weaponSkins[category];
            
            // 清空现有内容
            skinsGrid.innerHTML = '';
            
            // 添加新的皮肤卡片
            skins.forEach(skin => {
                const skinCard = document.createElement('div');
                skinCard.className = 'skin-card';
                skinCard.innerHTML = `
                    <div class="skin-image" style="background-image: url('images/skin1.jpg');"></div>
                    <div class="skin-info">
                        <div class="skin-name">${skin.name}</div>
                        <div class="skin-series">${skin.series}</div>
                    </div>
                `;
                skinsGrid.appendChild(skinCard);
            });
        }

        // 武器类别切换
        const categoryButtons = document.querySelectorAll('.category-btn');
        categoryButtons.forEach(button => {
            button.addEventListener('click', () => {
                categoryButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                updateSkins(button.textContent);
            });
        });

        // 初始化显示手枪类别的皮肤
        updateSkins('手枪');
    </script>
</body>
</html>